<template>
<movable-area class="slider-left-item" style="width:calc({{openWidth}}px + 750px);margin-left:-{{openWidth}}px;">
  <movable-view class="slider-left-content"
    damping="100"
    x="{{x}}"
    direction="horizontal"
    bind:touchstart="handleTouchestart"
    bind:touchend="handleTouchend"
    bind:change="handleChange">
    <slot></slot>
  </movable-view>
  <view class='slider-left-handle'>
    <view bind:tap="handleDelete" style="width:{{openWidth}}px" class='handle-delete'>删除</view>
  </view>
</movable-area>
</template>

<script>
	export default {
		
	}
</script>

<style>
.slider-left-item {
  overflow: hidden;
  background-color: #fff;
  /* movable-area重置默认高度 */
  height: auto;
}

.slider-left-content {
  display: flex;
  align-items: center;
  height: 100%;
  width: 750upx;
  background: inherit;
  color: inherit;
  /* movable-view重置默认绝对定位 */
  position: relative;
  z-index: 1;
}


.slider-left-handle {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index: 0;
}

.handle-delete {
  background-color: red;
  width: 150upx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
</style>
